<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>地址选择</title>
    <!--引入css-->
    <link rel="stylesheet" href="../../css/reset.css"/>
    <link rel="stylesheet" href="../../css/public.css"/>
    <link rel="stylesheet" href="../../css/address.css"/>
    <script type="text/javascript">
        if (/Android (\d+\.\d+)/.test(navigator.userAgent)) {
            var version = parseFloat(RegExp.$1);
            if (version > 2.3) {
                var phoneScale = parseInt(window.screen.width) / 750;
                document.write('<meta name="viewport" content="width=750, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
            } else {
                document.write('<meta name="viewport" content="width=750, target-densitydpi=device-dpi">');
            }
        } else {
            document.write('<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">');
        }
    </script>
</head>
<body>
<!-- 地址选择列表 -->
<div id="js-address-popup" class="address-popup">
    <div class="top-bar-box">
        <p class="top-bar-inp">
            <i class="icon-search"></i>
            <input type="text" placeholder="城市名称／首字母" class="input">
        </p>
        <a id="js-btn-cancel" class="btn-cancel" href="javascript:void (0);">取消</a>
    </div>
    <!--空盒子，填充由于定位引起的空白区域 start-->
    <div class="empty-box"></div>
    <!--空盒子，填充由于定位引起的空白区域 end-->
    <div id="address-list" class="address-list">
        <div class="section">
            <h2 class="address-item-tit">
                <i class="icon-location"></i>
                <span>定位</span>
            </h2>
            <div class="address-item">
                <a href="javascript:void (0);" class="item-block ellipsis">成都</a>
            </div>
        </div>
        <div class="section">
            <h2 class="address-item-tit">
                <i class="icon-history"></i>
                <span>历史</span>
            </h2>
            <div class="address-item">
                <a href="javascript:void (0);" class="item-block ellipsis">成都</a>
                <a href="javascript:void (0);" class="item-block ellipsis">上海</a>
            </div>
        </div>
        <div class="section">
            <h2 class="address-item-tit">
                <i class="icon-hot"></i>
                <span>热门</span>
            </h2>
            <div class="address-item">
                <a href="javascript:void (0);" class="item-block ellipsis">成都</a>
                <a href="javascript:void (0);" class="item-block ellipsis">上海</a>
                <a href="javascript:void (0);" class="item-block ellipsis">北京</a>
                <a href="javascript:void (0);" class="item-block ellipsis">广州</a>
                <a href="javascript:void (0);" class="item-block ellipsis">重庆</a>
                <a href="javascript:void (0);" class="item-block ellipsis">杭州</a>
                <a href="javascript:void (0);" class="item-block ellipsis">广州</a>
                <a href="javascript:void (0);" class="item-block ellipsis">重庆</a>
                <a href="javascript:void (0);" class="item-block ellipsis">杭州</a>
            </div>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">A</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">阿坝</a></li>
                <li><a href="javascript:void (0);">阿城区 哈尔滨</a></li>
                <li><a href="javascript:void (0);">阿尔山市</a></li>
                <li><a href="javascript:void (0);">安丘</a></li>
                <li><a href="javascript:void (0);">安乡</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">B</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">北京</a></li>
                <li><a href="javascript:void (0);">保亭</a></li>
                <li><a href="javascript:void (0);">保定</a></li>
                <li><a href="javascript:void (0);">保山</a></li>
                <li><a href="javascript:void (0);">保康</a></li>
                <li><a href="javascript:void (0);">保德</a></li>
                <li><a href="javascript:void (0);">保靖</a></li>
                <li><a href="javascript:void (0);">八宿</a></li>
                <li><a href="javascript:void (0);">勃利</a></li>
                <li><a href="javascript:void (0);">包头</a></li>
                <li><a href="javascript:void (0);">北岸</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">C</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">成都</a></li>
                <li><a href="javascript:void (0);">重庆</a></li>
                <li><a href="javascript:void (0);">长沙</a></li>
                <li><a href="javascript:void (0);">长春</a></li>
                <li><a href="javascript:void (0);">从江</a></li>
                <li><a href="javascript:void (0);">册亨</a></li>
                <li><a href="javascript:void (0);">城固</a></li>
                <li><a href="javascript:void (0);">城步</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">D</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">丁青</a></li>
                <li><a href="javascript:void (0);">东丰</a></li>
                <li><a href="javascript:void (0);">东吴镇</a></li>
                <li><a href="javascript:void (0);">东乡</a></li>
                <li><a href="javascript:void (0);">东光</a></li>
                <li><a href="javascript:void (0);">东兰</a></li>
                <li><a href="javascript:void (0);">东台</a></li>
                <li><a href="javascript:void (0);">东宁</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">E</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">二连浩特</a></li>
                <li><a href="javascript:void (0);">峨山</a></li>
                <li><a href="javascript:void (0);">峨眉山</a></li>
                <li><a href="javascript:void (0);">峨边</a></li>
                <li><a href="javascript:void (0);">恩平</a></li>
                <li><a href="javascript:void (0);">恩施</a></li>
                <li><a href="javascript:void (0);">恩施市</a></li>
                <li><a href="javascript:void (0);">洱源</a></li>
                <li><a href="javascript:void (0);">鄂伦春旗</a></li>
                <li><a href="javascript:void (0);">鄂州</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">F</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">福州</a></li>
                <li><a href="javascript:void (0);">丰县</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">G</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">广州</a></li>
                <li><a href="javascript:void (0);">贵阳</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">H</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">杭州</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">J</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">济南</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">K</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">开封</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">L</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">洛阳</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">M</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">眉山</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">N</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">牛市口</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">P</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">攀枝花</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">Q</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">青岛</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">R</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">仁化</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">S</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">山东</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">T</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">天津</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">W</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">武汉</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">X</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">西安</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">Y</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">延边</a></li>
            </ul>
        </div>
        <div class="section">
            <h2 class="address-letter-tit">Z</h2>
            <ul class="address-routine-item">
                <li><a href="javascript:void (0);">郑州</a></li>
            </ul>
        </div>
    </div>
</div>

<script type="text/javascript" src="../../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../js/pagescroller.min.js"></script>
<script type="text/javascript" src="../../js/index.js"></script>
<script type="text/javascript">
//    右侧地址按照字母选择
    $(document).ready(function() {
        var navLabel = new Array("定位","历史","热门","A","B","C","D","E","F","G","H","J","K","L","M","N","P","Q","R","S","T","W","X","Y","Z");
        $('#address-list').pageScroller({
            navigation: navLabel,
            scrollOffset: + 104,
            animationSpeed: 750,
        });
    });
</script>
</body>
</html>